<template>
  <div class="goods">
    <div class="operation">
      <el-input
        placeholder="请输入商品名称"
        v-model="pages.goodsName"
        clearable
      ></el-input>
      <el-button type="primary" @click="searchGoods">搜索</el-button>
      <el-button type="primary" @click="openCreate">添加商品</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="缩略图" width="180">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="urlHost + scope.row.product_img"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="product_name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="product_price" label="价格(￥)"> </el-table-column>
      <el-table-column prop="product_num" label="库存"> </el-table-column>
      <el-table-column prop="product_desc" label="简介"> </el-table-column>
      <el-table-column prop="product_state" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.product_state === '1'" type="success"
            >已上架</el-tag
          >
          <el-tag v-else type="danger">待上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="openDel(scope.row)"
            >删除</el-button
          >
          <el-button
            type="text"
            v-if="
              scope.row.product_state === '0' && $store.state.user.roles === '0'
            "
            size="small"
            @click="openCheck(scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- dialog -->
    <el-dialog
      title="新增商品"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :before-close="closeDialog"
    >
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.goodsName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格(￥)" :label-width="formLabelWidth">
          <el-input
            v-model.number="form.goodsPrice"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品数量" :label-width="formLabelWidth">
          <el-input
            v-model.number="form.goodsNum"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类型" :label-width="formLabelWidth">
          <el-select v-model="form.category" placeholder="请选择商品类型">
            <template v-for="item in category">
              <el-option
                :key="item.type_id"
                :label="item.type_name"
                :value="item.type_id"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="商品简介" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入商品简介"
            v-model="form.goodsDesc"
          >
          </el-input>
        </el-form-item>
        <!-- 商品图片上传 -->
        <el-form-item label="商品图片" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            :action="urlHost + 'tool/upload'"
            :header="headers"
            :file-list="fileList"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="create">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 审核dialog -->
    <el-dialog title="提示" :visible.sync="checkDialogVisible" width="30%">
      <span>是否确认通过该商品申请</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCheck">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除dialog -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%">
      <span>是否删除该商品</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDel">确 定</el-button>
      </span>
    </el-dialog>

    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :page-size="5"
      :total="pages.total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  createGoods,
  getGoods,
  updateGoods,
  checkGoods,
  delGoods,
  getGoodsCategory,
} from "@/api/modules/goods";
export default {
  name: "",
  data() {
    return {
      urlHost: `${process.env.VUE_APP_BASE_API}/`,
      input: "",
      autoUpload: false,
      isUpdate: false,
      fileList: [],
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      checkDialogVisible: false,
      delDialogVisible: false,
      form: {
        goodsName: "",
        goodsPrice: "",
        goodsNum: "",
        goodsDesc: "",
        category: "",
        imgUrl: "",
        id: "",
      },
      row: {
        id: "",
        state: "",
      },
      pages: {
        pageSize: 5,
        pageNum: 1,
        total: 0,
        goodsName: "",
      },
      // 商品分类
      category: [],
    };
  },
  computed: {
    headers() {
      return {
        Authorization: "Bearer " + this.$store.getters.token,
      };
    },
  },
  components: {},
  methods: {
    // 重置form
    resetForm() {
      this.form = {
        goodsName: "",
        goodsPrice: "",
        goodsNum: "",
        goodsDesc: "",
        category: "",
        imgUrl: "",
        id: "",
      };
      this.fileList = [];
    },
    closeDialog(done) {
      this.resetForm();
      done();
    },
    // 创建商品
    create() {
      if (this.isUpdate) {
        const info = { ...this.form, id: this.form.id };
        updateGoods(info).then((res) => {
          if (res.code === "10011") {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.getList({ type: "all" });
            this.dialogFormVisible = false;
            this.isUpdate = false;
            this.resetForm();
          }
        });
        return;
      }
      createGoods(this.form).then((res) => {
        if (res.code === "10009") {
          this.$message({
            message: "创建成功",
            type: "success",
          });
          this.getList({ type: "all" });
          this.dialogFormVisible = false;
        }
      });
    },
    // 获取商品列表
    getList() {
      getGoods(this.pages).then((res) => {
        // console.log(res);
        const { total, list } = res.data;
        this.tableData = list;
        this.pages.total = total;
      });
    },
    // 获取商品分类列表
    getCategory() {
      getGoodsCategory().then(({ data }) => {
        this.category = data;
      });
    },
    // 图片上传的回调
    handleSuccess({ data }, file, fileList) {
      this.form.imgUrl = data.url;
    },

    // 分页
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.getList();
    },
    // 打开编辑dialog
    openUpdate(row) {
      console.log(row);
      this.isUpdate = true;
      const {
        product_name,
        product_price,
        product_desc,
        product_img,
        product_num,
        product_type,
        product_id,
      } = row;
      this.form.id = product_id;
      this.form.goodsName = product_name;
      this.form.goodsPrice = product_price;
      this.form.goodsDesc = product_desc;
      this.form.imgUrl = product_img;
      this.form.goodsNum = product_num;
      this.form.category = product_type;
      this.fileList = [
        {
          name: "food.jpg",
          url: this.urlHost + product_img,
        },
      ];
      this.dialogFormVisible = true;
    },
    // 打开创建dialog
    openCreate() {
      this.isUpdate = false;
      this.resetForm();
      this.dialogFormVisible = true;
    },

    // 打开审核dialog
    openCheck(row) {
      // console.log(row);
      this.row.id = row.product_id;
      this.row.state = "1";
      this.checkDialogVisible = true;
    },
    submitCheck() {
      checkGoods(this.row).then((res) => {
        console.log(res);
        if (res.code === "10013") {
          this.$message({
            message: "审核成功",
            type: "success",
          });
          this.getList();
          this.checkDialogVisible = false;
          this.row = {
            id: "",
            state: "",
          };
        }
      });
    },

    // 打开删除dialog
    openDel(row) {
      this.row.id = row.product_id;
      this.delDialogVisible = true;
    },
    submitDel() {
      delGoods(this.row).then((res) => {
        if (res.code === "10014") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList();
          this.delDialogVisible = false;
          this.row = {
            id: "",
            state: "",
          };
        }
      });
      this.delDialogVisible = false;
    },
    // 文件移除
    handleRemove(file, fileList) {
      this.fileList = fileList;
      // console.log(file, fileList);
    },

    // 搜索商品
    searchGoods() {
      // console.log(this.pages);
      this.getList();
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    this.getCategory();
  },
};
</script>

<style lang="scss" scoped>
.goods {
  padding: 20px;
}
.operation {
  display: flex;
  justify-content: right;
  margin-bottom: 20px;
  .el-input {
    width: 260px;
  }
  .el-button {
    width: 100px;
  }
}
.pagination {
  float: right;
  margin: 20px 0;
}
</style>
